{% extends "base.html" %}
{% block content %}
<div class="container">
    <div style="margin-bottom: 10px" class="clearfix">
        <div style="float: right;width: 500px">
            <form method="get">
                <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" name="q" class="form-control" placeholder="请输入IP或地区..." value={{ search_data }}>
                        <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </button>
                      </span>
                    </div><!-- /input-group -->
                  </div><!-- /.col-lg-6 -->
            </form>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <!--span class="glyphicon glyphicon-th-list" aria-hidden="true"></span-->
            <span>选择要备份配置的设备:</span>
        </div>
        <form method="POST">
            <table class="table table-bordered">
             {% csrf_token %}
              <thead>
                    <tr>
                        <th><input type="checkbox" id="select-all" >全选</th>
                        <th>管理IP</th>
                        <th>设备名称</th>
                        <th>地区</th>
                    </tr>
              </thead>
              <tbody>
                {% for device in devices %}
                    <tr>
                        <td><input type="checkbox" class="select-item" name="device" value="{{ device.id }}"></td>
                        <td>{{device.ip_address}}</td>
                        <td>{{device.dev_name}}</td>
                        <td>{{device.diqu}}</td>
                    </tr>
                {% endfor %}
             <tbody>
            </table>
        <button type="submit" class="mt-3 btn btn-primary">开始备份</button>
        </form>
    </div>
      <div class="clearfix">
        <ul class="pagination" style="float:left;">
            {{ page_string }}
            <li>
                <form method="get" style="float: left;margin-left: -1px">
                    <div class="input-group" style="width: 110px">
                        <input type="text" name="page" class="form-control" placeholder="页码">
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-default">跳转</button>
                        </span>
                    </div>
                </form>
            </li>

        </ul>
    </div>

</div>
{% endblock content %}
{% block js %}
<script>
const selectAllCheckbox = document.getElementById('select-all');
const selectItemCheckboxes = document.querySelectorAll('.select-item');


selectAllCheckbox.addEventListener('click', function() {
  for (let i = 0; i < selectItemCheckboxes.length; i++) {
    selectItemCheckboxes[i].checked = selectAllCheckbox.checked;
  }
});

// 获取所有分页的数据，并绑定全选按钮的click事件
function getAllData() {
    const allCheckboxes = document.querySelectorAll('.select-item');
    selectAllCheckbox.addEventListener('click', function() {
        for (let i = 0; i < allCheckboxes.length; i++) {
        allCheckboxes[i].checked = selectAllCheckbox.checked;
        }
    });
}

// 翻页时也需要重新获取所有分页的数据，并重新绑定全选按钮的click事件
function onPageChanged() {
    getAllData();
}



</script>
{% endblock %}

